<template>
  <div class="divBox">
    <div>
      <div style="margin: 10px 0">
        <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
        <el-button class="ml-5" type="primary" @click="getTableData()">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </div>

      <div style="margin: 10px 0">
        <el-button type="primary" @click="addMessage">发送公告<i class="el-icon-circle-plus-outline"></i></el-button>
      </div>
      <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="标题" width="140"></el-table-column>
        <el-table-column prop="content" label="内容" ></el-table-column>
        <el-table-column prop="receiverId" label="接收人" width="140"></el-table-column>
        <el-table-column prop="time" label="时间" width="120"></el-table-column>
        <el-table-column label="操作"  width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="update(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id,scope.row.receiverId)" title="删除"/>

          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 10px 0">
        <el-pagination
          @current-change="getTableData"
          :page-size="pageSize"
          :current-page="pageNum"
          layout="total, prev, pager, next"
          :total="pages">
        </el-pagination>
        <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
          <el-form ref="dataForm" :model="message" label-width="150px" size="small" style="padding-right: 40px;">
            <el-form-item label="标题">
              <el-input v-model="message.title"/>
            </el-form-item>
            <el-form-item label="内容">
              <el-input v-model="message.content"/>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
        <el-button  @click="dialogVisible = false,message={},getTableData()" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="Update()" size="small">确 定</el-button>
      </span>
        </el-dialog>

      </div>
      <el-dialog :visible.sync="addVisible" width="30%"  title="添加公告">
        <el-tabs>
          <el-form>
            <el-form-item label="公告标题:">
              <el-input style="width: 320px" v-model="title"></el-input>
            </el-form-item>
            <el-form-item label="接收对象:">
              <el-select v-model="userList.name" @change="change" placeholder="请选择">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公告内容:">
              <el-input style="width: 320px" type="textarea" v-model="content"></el-input>
            </el-form-item>
          </el-form>
        </el-tabs>
        <div slot="footer">
          <el-button type="primary" size="small" @click="sendMessage()">添加</el-button>
          <el-button size="small" @click="addVisible = false,title='',content=''">取消</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {delMessage, sendMsg, updateMessage} from '@/api/message'
import { TableData } from '@/api/message'
import {selectAll} from '@/api/user'
export default {

  name: "messageNotice",
  data(){
    return{
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      name: "",
      editor: "",
      cbs: "",
      other: "",
      form: {},
      roles: [],
      dialogFormVisible: false,
      addVisible:false,
      multipleSelection: [],
      pages:"",
      dialogVisible:false,
      message:{},
      TMessageVo:{},
      userList:[],
      title:'',
      content:'',
      receiverId:'',

    }
  },
  methods:{
    addMessage(){
      this.addVisible=true;
    },
    update(message){
      this.message=message
      this.dialogVisible=true;
    },
    getTableData(pagNum=1){
      this.TMessageVo.title=this.name
      this.TMessageVo.content=this.name
      this.TMessageVo.index=pagNum
      TableData(this.TMessageVo)
        .then(response => {
          if (response.code=200){
            this.tableData=response.list
            this.pages = response.total
            this.pageSize = response.pageSize
            this.pageNum = response.pageNum
          }
      })
    },
    Update(){
      updateMessage(this.message)
        .then(response=>{
              this.dialogVisible = false
              this.getTableData()
              this.message={}
              this.$message.success('操作成功')

        })
    },
    del(messageId,receiverId){
      delMessage(messageId,receiverId)
        .then(response=>{
            this.getTableData()
            this.$message.success('操作成功')
        })
    },
    reset(){
      this.name=''
    },
    getUserList(){
      selectAll()
        .then(response=>{
          this.userList=response
      })
    },
    change(val){
    this.receiverId=val
    },
    sendMessage(){
    this.TMessageVo.title=this.title
    this.TMessageVo.content=this.content
    this.TMessageVo.receiverId=this.receiverId
      sendMsg(this.TMessageVo)
        .then(response=>{
        this.TMessageVo={}
          this.addVisible=false
      })
    }
  },
  mounted() {
    this.getTableData()
    this.getUserList()
  }
}
</script>

<style scoped>
.headerBg {
  background: #eee!important;
}
</style>
